<template>
  <div class="foSi14 poRel" style="padding: 20px;">
    <div class="borRad20 coFFF hei34 dis disAl cuPo poAbs fanhui" @click.stop="fanhui()">返回列表</div>
    <div class="poRel" :class="ruleForm.type === 3?'m-action-step1 m-action-step2':'m-action-step1'">
      <div class="dis disAl disJuB poRel wid100">
        <div class="textCen poRel" style="z-index: 2;">
          <div class="curr1 curr2 mar">1</div>
          <span class="hei20 dis disAl disJuC mar-top5" style="color: #6b7cdd;">基本信息</span>
        </div>
        <div v-if="ruleForm.type === 3" class="textCen poRel" style="z-index: 2;">
          <div class="curr1 mar" :class="step === 2?'curr2':''">2</div>
          <span class="hei20 dis disAl disJuC mar-top5" :style="step === 2?'color: #6b7cdd;':''">支付方式</span>
        </div>
        <div v-if="ruleForm.type !== 3" class="textCen poRel" style="z-index: 2;">
          <div class="curr1 mar" :class="step >= 2?'curr2':''">2</div>
          <span class="hei20 dis disAl disJuC mar-top5" :style="step >= 2?'color: #6b7cdd;':''">预约规则</span>
        </div>
        <div v-if="ruleForm.type !== 3" class="textCen poRel" style="z-index: 2;">
          <div class="curr1 mar" :class="step === 3?'curr2':''">3</div>
          <span class="hei20 dis disAl disJuC mar-top5" :style="step === 3?'color: #6b7cdd;':''">支付方式</span>
        </div>
        <div class="wid90 poAbs" style="top: 16px;height: 5px;background: #e8e8e8;z-index: 1;left: 15px;">
          <div
            style="background: #6b7cdd;"
            class="hei100"
            :style="'width: '+(ruleForm.type === 3?step === 2?'100%':'128px':step === 3?'100%':step === 2?'332px':'128px')+';'"
          />
        </div>
      </div>
    </div>
    <div v-if="step == 1" class="mar" style="width: 840px;">
      <div class="foSi12 titl">基本信息</div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <div class="wid100 hei44 dis disAl item-l mar-bott10">
          <div class="dis disAl disJuB hei100 item-r">
            <div class="dis disAl">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>课程名称</span>
            </div>
            <el-form-item class="mp0" prop="name">
              <el-input v-model="ruleForm.name" style="width: 140px;" placeholder="请填写课程名称" />
            </el-form-item>
          </div>
          <div>1-30个字符，支持汉字，字母及数字。</div>
        </div>
        <div class="wid100 hei44 dis disAl item-l mar-bott10">
          <div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div class="dis disAl">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>类型</span>
            </div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="typeClick(1)">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm.type === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">团课</div>
              </div>
              <div class="dis disAl cuPo mar-left10" @click.stop="typeClick(2)">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm.type === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">精品课</div>
              </div>
              <div class="dis disAl cuPo mar-left10" @click.stop="typeClick(3)">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm.type === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">私教课</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm.type === 3" class="dis disAl disJuB hei100 item-r">
            <div class="dis disAl">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>老师课时费（元/节）</span>
            </div>
            <el-form-item class="mp0" prop="classFee">
              <el-input v-model="ruleForm.classFee" style="width: 140px;" placeholder="请输入老师课时费" />
            </el-form-item>
          </div>
          <div v-if="ruleForm.type !== 3" class="dis disAl disJuB hei100 item-r">
            <div class="dis disAl">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>容纳人数（人）</span>
            </div>
            <el-form-item class="mp0" prop="galleryful">
              <el-input v-model="ruleForm.galleryful" style="width: 140px;" placeholder="请填写人数" />
            </el-form-item>
          </div>
        </div>
        <div class="wid100 hei44 dis disAl item-l mar-bott10">
          <div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div class="dis disAl">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>课程时长（分钟）</span>
            </div>
            <el-form-item class="mp0" prop="kcTime">
              <el-input v-model="ruleForm.kcTime" style="width: 140px;" placeholder="请输入课程时长" />
            </el-form-item>
          </div>
          <div class="dis disAl disJuB hei100 item-r">
            <div class="dis disAl">颜色</div>
            <el-popover
              v-model="isPopover"
              popper-class="monitor-yt-popover1"
              placement="bottom"
              width="220"
              trigger="click"
            >
              <div class="wid100">
                <div
                  class="coFFF dis disAl"
                  style="background: #84878d;height: 24px;padding-left: 10px;"
                >选颜色</div>
                <div class="wid100 dis disAl flwa" style="padding: 11px 5px 5px 11px;">
                  <div
                    v-for="(item,index) in colorList"
                    :key="index"
                    class="col cuPo"
                    :style="'background: #'+item+';'"
                    @click.stop="ruleForm.color = item,isPopover = false"
                  />
                </div>
              </div>
              <div
                slot="reference"
                class="dis disAl hei34 bacFFF cuPo"
                style="border: 1px solid #d9d9d9;"
              >
                <span style="width: 10px;" />
                <span style="width: 100px;height: 20px;" :style="'background: #'+ruleForm.color+';'" />
                <div class="dis disJuC" style="width: 40px;">
                  <i class="el-icon-arrow-down" />
                </div>
              </div>
            </el-popover>
          </div>
        </div>
        <div class="wid100 hei44 dis disAl item-l mar-bott10">
          <div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div class="dis disAl">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>老师</span>
            </div>
            <el-form-item class="mp0" prop="teacherName">
              <el-select v-model="ruleForm.teacherName" style="width: 140px" placeholder="请选择">
                <el-option
                  v-for="(item,index) in teacherList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

          </div>
          <div class="dis disAl disJuB hei100 item-r">
            <div class="dis disAl">课程难度</div>
            <div class="dis disAl">
              <svg-icon
                v-for="(item,index) in 5"
                :key="index"
                :icon-class="index+1 <= Number(ruleForm.difficulty)?'s_xing':'k_xing'"
                class="mar0 cuPo"
                style="width: 20px;height: 20px;fill: #f49352;"
                @click.stop="ruleForm.difficulty = (index+1)"
              />
            </div>
          </div>
        </div>
        <div class="wid100 dis disAl item-l mar-bott10" style="height: 100px;">
          <div class="dis disJuB item-r" style="padding: 5px 15px;">
            <div class="dis" style="padding-top: 10px;">
              <span class="mar-right5" style="color: #FF0000;">*</span>
              <span>课程展示封面图</span>
            </div>
            <div style="width: 160px;height: 74px;">
              <el-image :src="ruleForm.image" fit="fill" class="wh100" />
            </div>
          </div>
          <div class="dis disAl item-r">
            <div
              class="borRad20 coFFF dis disAl hei34 cuPo"
              style="background: #6b7cdd;padding: 0 10px;"
              @click.stop="shuaVisible = true"
            >
              选择图片</div>
            <span class="mar-left20 foSi12" style="color: #b8b8b8;">（建议尺寸750*422像素）</span>
          </div>
        </div>
        <div class="wid100 hei44 dis disAl item-l mar-bott10">
          <div class="dis disAl disJuB hei100 item-r">
            <div class="dis disAl">课程序号</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm.serial = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm.serial === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">置顶</div>
              </div>
              <div class="dis disAl cuPo mar-left10" @click.stop="ruleForm.serial = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm.serial === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">自定义</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm.serial === 2" class="dis disAl disJuB hei100 item-r">
            <el-form-item class="mp0" prop="serialNumber">
              <el-input
                v-model="ruleForm.serialNumber"
                style="width: 310px;"
                placeholder="请输入数字，数值越大越靠前展示"
              />
            </el-form-item>
          </div>
        </div>
        <div class="wid100 dis item-l mar-bott10" style="padding: 5px 15px;">
          <div class="dis mar-right20" style="padding-top: 10px;">简介</div>
          <div class="class-desc">
            <el-upload action="#" :http-request="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
              <div class="rich-insert	">
                <svg-icon icon-class="up-editior" class="mar0 cuPo" style="width: 25px;height: 25px;" />
                <span class="mar-left10">插入图片</span>
              </div>
            </el-upload>
            <div
              class="rich-row"
              contenteditable="true"
              @click="handleSelection"
              @input="handleSelection"
            />
          </div>
        </div>
      </el-form>
    </div>
    <div v-if="step === 2 && ruleForm.type !== 3" class="mar" style="width: 840px;">
      <div class="foSi12 titl">预约规则设置</div>
      <el-form ref="ruleForm1" :model="ruleForm1" :rules="rules1">
        <div class="hei44 dis disAl item-l mar-bott30" style="padding: 0 15px;">
          <div class="label">预约规则</div>
          <div class="dis disAl">
            <div class="dis disAl cuPo" @click.stop="regulationClick(1)">
              <div
                class="dis disAl disJuC bacFFF borRad50"
                style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
              >
                <div
                  v-if="ruleForm1.regulation === 1"
                  class="borRad50"
                  style="width: 6px;height: 6px;background: #6b7cdd;"
                />
              </div>
              <div class="mar-left5">遵从系统设置</div>
            </div>
            <div class="dis disAl cuPo mar-left30" @click.stop="regulationClick(2)">
              <div
                class="dis disAl disJuC bacFFF borRad50"
                style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
              >
                <div
                  v-if="ruleForm1.regulation === 2"
                  class="borRad50"
                  style="width: 6px;height: 6px;background: #6b7cdd;"
                />
              </div>
              <div class="mar-left5">单独设置，不遵从系统</div>
            </div>
          </div>
        </div>
        <div class="poRel">
          <div
            v-if="ruleForm1.regulation === 1"
            class="wh100 poAbs"
            style="top: 0;z-index: 10"
            @click.stop="jinzhi"
          />
          <div class="foSi12 titl">预约时间设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">预约方式</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.mode = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.mode === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">不支持会员自主预约</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.mode = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.mode === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">单自主预约，不限制预约时间 </div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.mode = 3">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.mode === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">自主预约，限制预约时间</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.mode === 3" class="dis item-l mar-bott10" style="padding: 5px 15px;">
            <div class="label">预约时间</div>
            <div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.time = 1"
                >
                  <div
                    v-if="ruleForm1.time === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">提前</div>
                <el-form-item prop="fenTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.astrict1"
                    class="cen"
                    style="width: 80px;"
                    placeholder="不限制"
                  />
                </el-form-item>
                <div class="mar-left10 mar-right5">天，</div>
                <el-select v-model="ruleForm1.startShi" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in shiList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5 mar-right5">:</div>
                <el-select v-model="ruleForm1.startFen" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in fenList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left10 mar-right10">至</div>
                <el-select v-model="ruleForm1.endShi" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in shiList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5 mar-right5">:</div>
                <el-select v-model="ruleForm1.endFen" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in fenList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5">接受自主预约</div>
              </div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.time = 2"
                >
                  <div
                    v-if="ruleForm1.time === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">提前</div>
                <el-form-item prop="astrict2" class="mp0">
                  <el-input
                    v-model="ruleForm1.astrict2"
                    class="cen"
                    style="width: 80px;"
                    placeholder="不限制"
                  />
                </el-form-item>
                <div class="mar-left10 mar-right5">天，</div>
                <el-select v-model="ruleForm1.startShi1" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in shiList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5 mar-right5">:</div>
                <el-select v-model="ruleForm1.startFen1" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in fenList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5">接受自主预约</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.time = 3"
                >
                  <div
                    v-if="ruleForm1.time === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">开课前</div>
                <el-form-item prop="fenTime1" class="mp0">
                  <el-input
                    v-model="ruleForm1.fenTime1"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟接受自主预约</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.mode >= 2" class="dis item-l mar-bott30" style="padding: 5px 15px;">
            <div class="label">预约截止时间</div>
            <div class="dis disAl">
              <div class="mar-right15">课程预约人数未满，会员需早于开课前</div>
              <el-form-item prop="fenTime2" class="mp0">
                <el-input
                  v-model="ruleForm1.fenTime2"
                  class="cen"
                  style="width: 80px;"
                  placeholder="0"
                />
              </el-form-item>
              <div class="mar-left5">分钟接受自主预约</div>
            </div>
          </div>
          <div class="foSi12 titl">排队候补设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">排队候补</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.candidate = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.candidate === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.candidate = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.candidate === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.candidate === 1" class="dis item-l mar-bott30" style="padding: 5px 15px;">
            <div class="label">候补设置</div>
            <div>
              <div class="dis disAl mar-bott10">
                <div class="mar-right15">最大排队人数</div>
                <el-form-item prop="upMax" class="mp0">
                  <el-input
                    v-model="ruleForm1.upMax"
                    class="cen"
                    style="width: 90px;"
                    placeholder="0"
                  />
                </el-form-item>
              </div>
              <div class="dis disAl mar-bott10">
                <div class="mar-right15">开课前</div>
                <el-form-item prop="stopTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.stopTime"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟停止排队</div>
              </div>
              <div class="dis disAl">
                <div class="mar-right15">开课前</div>
                <el-form-item prop="stopCandidate" class="mp0">
                  <el-input
                    v-model="ruleForm1.stopCandidate"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟停止候补</div>
              </div>
            </div>
          </div>
          <div class="foSi12 titl">签到设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">自主签到</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.selfCheck = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCheck === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.selfCheck = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCheck === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.selfCheck === 1" class="dis item-l mar-bott10" style="padding: 5px 15px;">
            <div class="label">签到时间</div>
            <div>
              <div class="dis disAl mar-bott10 hei34">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.selfCheckTime = 1"
                >
                  <div
                    v-if="ruleForm1.selfCheckTime === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">课程当天，会员可随时签到</div>
              </div>
              <div class="dis disAl mar-bott10 hei34">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.selfCheckTime = 2"
                >
                  <div
                    v-if="ruleForm1.selfCheckTime === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">课程当天，会员可在课程结束前签到</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.selfCheckTime = 3"
                >
                  <div
                    v-if="ruleForm1.selfCheckTime === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">课程当天，会员可在课程结束后</div>
                <el-form-item prop="selfCheckFenTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCheckFenTime"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟内签到</div>
              </div>
            </div>
          </div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">扫码签到</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.codeScan = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.codeScan === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.codeScan = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.codeScan === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.codeScan === 1" class="dis item-l mar-bott30" style="padding: 5px 15px;">
            <div class="label">签到时间</div>
            <div>
              <div class="dis disAl mar-bott10 hei34">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.codeScanTime = 1"
                >
                  <div
                    v-if="ruleForm1.codeScanTime === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">课程当天，会员可签到两小时内开始的课程</div>
              </div>
              <div class="dis disAl mar-bott10 hei34">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.codeScanTime = 2"
                >
                  <div
                    v-if="ruleForm1.codeScanTime === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">课程当天，会员可在课程结束前扫码签到</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.codeScanTime = 3"
                >
                  <div
                    v-if="ruleForm1.codeScanTime === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">课程当天，会员可在课程开始前</div>
                <el-form-item prop="codeScanEnd" class="mp0">
                  <el-input
                    v-model="ruleForm1.codeScanEnd"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5 mar-right5">分钟至课程结束后</div>
                <el-form-item prop="codeScanEndTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.codeScanEndTime"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟内扫码签到</div>
              </div>
            </div>
          </div>
          <div class="setting-tips__normal mar-bott10">
            <svg-icon icon-class="tishi" class="mar0" style="width: 16px;height: 16px;" />
            <span>预约取消设置仅针对会员支付的约课，无卡支付的约课暂不支持会员自主预约取消</span>
          </div>
          <div class="foSi12 titl">预约取消设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">自主取消</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.selfCancel = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCancel === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.selfCancel = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCancel === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.selfCancel === 1" class="dis item-l mar-bott10" style="padding: 5px 15px;">
            <div class="label">取消时间</div>
            <div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.s_selfCancel = 1"
                >
                  <div
                    v-if="ruleForm1.s_selfCancel === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">会员自主取消不晚于开课前</div>
                <el-form-item prop="selfCancelTime1" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCancelTime1"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟</div>
              </div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.s_selfCancel = 2"
                >
                  <div
                    v-if="ruleForm1.s_selfCancel === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">会员自主取消不晚于开课后</div>
                <el-form-item prop="selfCancelTime2" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCancelTime2"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.s_selfCancel = 3"
                >
                  <div
                    v-if="ruleForm1.s_selfCancel === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">会员自主取消不晚于课程结束后</div>
                <el-form-item prop="selfCancelTime3" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCancelTime3"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟</div>
              </div>
            </div>
          </div>

        </div>
      </el-form>
    </div>
    <div v-if="step === 3 || (step === 2 && ruleForm.type === 3)" class="mar" style="width: 840px;">
      <div class="foSi12 titl">付费约课</div>
      <el-form ref="ruleForm2" :model="ruleForm2" :rules="rules2">
        <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
          <div class="label">付费约课</div>
          <div class="dis disAl">
            <div class="dis disAl cuPo" @click.stop="ruleForm2.paid = 1">
              <div
                class="dis disAl disJuC bacFFF borRad50"
                style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
              >
                <div
                  v-if="ruleForm2.paid === 1"
                  class="borRad50"
                  style="width: 6px;height: 6px;background: #6b7cdd;"
                />
              </div>
              <div class="mar-left5">开启</div>
            </div>
            <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm2.paid = 2">
              <div
                class="dis disAl disJuC bacFFF borRad50"
                style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
              >
                <div
                  v-if="ruleForm2.paid === 2"
                  class="borRad50"
                  style="width: 6px;height: 6px;background: #6b7cdd;"
                />
              </div>
              <div class="mar-left5">关闭</div>
            </div>
          </div>
        </div>
        <div v-if="ruleForm2.paid === 1" class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
          <div class="label"><span class="mar-right5" style="color: #FF0000;">*</span>原价（元/次）</div>
          <el-form-item prop="originalPrice" class="mp0">
            <el-input v-model="ruleForm2.originalPrice" style="width: 140px;" placeholder="请输入原价" />
          </el-form-item>
        </div>
        <div v-if="ruleForm2.paid === 1" class="hei44 dis disAl item-l" style="padding: 0 15px;">
          <div class="label">优惠价（元/次）</div>
          <el-input v-model="ruleForm2.discounts" style="width: 140px;" placeholder="请输入优惠价" />
          <span class="mar-left10">课程实际售价</span>
        </div>
        <div class="foSi12 titl mar-top30">会员卡约课</div>
        <div class="dis item-l" style="padding: 10px 15px;">
          <div class="label"><span class="mar-right5" style="color: #FF0000;">*</span>支持卡类型</div>
          <div style="width: 650px;">
            <el-checkbox v-model="ruleForm2.dateCardAll" @change="handleCheckAllChange">期限卡</el-checkbox>
            <div style="height: 10px;" />
            <div class="mar-bott20" style="padding-left: 20px;">
              <el-checkbox-group v-model="ruleForm2.dateCard" @change="handleCheckedCitiesChange">
                <el-checkbox
                  v-for="(item,index) in dateCardList"
                  :key="index"
                  class="mar-bott10"
                  style="margin-right: 40px;"
                  :label="item.id"
                >{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-checkbox v-model="ruleForm2.cardTimeAll" @change="handleCheckAllChange1">次数卡</el-checkbox>
            <div style="height: 10px;" />
            <div style="padding-left: 20px;">
              <el-checkbox-group v-model="ruleForm2.cardTime" @change="handleCheckedCitiesChange1">
                <el-checkbox
                  v-for="(item,index) in cardTimeList"
                  :key="index"
                  class="mar-bott10"
                  style="margin-right: 40px;"
                  :label="item.id"
                >
                  <div class="dis disAl">
                    <span class="mar-right10">{{ item.name }} 每节课收费</span>
                    <el-form-item :prop="`${item.id}`" :rules="rules2.value" class="mp0">
                      <el-input v-model="item.nums" style="width: 140px;" placeholder="请输入次数" />
                    </el-form-item>
                    <span class="mar-left10">次</span>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <el-checkbox v-model="ruleForm2.cardStoredAll" @change="handleCheckAllChange2">储值卡</el-checkbox>
            <div style="height: 10px;" />
            <div style="padding-left: 20px;">
              <el-checkbox-group v-model="ruleForm2.cardStored" @change="handleCheckedCitiesChange2">
                <el-checkbox
                  v-for="(item,index) in cardStoredList"
                  :key="index"
                  class="mar-bott10"
                  style="margin-right: 40px;"
                  :label="item.id"
                >
                  <div class="dis disAl">
                    <span class="mar-right10">{{ item.name }} 每节课收费</span>
                    <el-form-item :prop="`${item.id}`" :rules="rules3.value" class="mp0">
                      <el-input v-model="item.nums" style="width: 140px;" placeholder="请输入价格" />
                    </el-form-item>
                    <span class="mar-left10">元</span>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="dis disAl disJuC " style="padding: 30px 0;">
      <div
        v-if="step !== 1"
        class="mar-right30 dis disAl hei34 borRad20 coFFF cuPo"
        style="background: #6b7cdd;padding: 0 24px;"
        @click.stop="step -= 1"
      >上一步</div>
      <div
        class="dis disAl hei34 borRad20 coFFF cuPo"
        style="background: #6b7cdd;padding: 0 24px;"
        @click.stop="submitForm(step === 1?'ruleForm':step === 2 && ruleForm.type !== 3?'ruleForm1':'ruleForm2')"
      >
        {{ (step === 1 || (step === 2 && ruleForm.type !== 3))?'下一步':'保存' }}
      </div>
    </div>
    <div v-if="shuaVisible" class="zhezhao wh100" />
    <div v-if="shuaVisible" class="zhezhaoN dis disAl disJuC wh100">
      <div class="poRel borRad10 bacFFF" style="width: 650px;">
        <div class="poRel" style="padding: 30px;">
          <svg-icon
            icon-class="guanbi"
            class="mar0 cuPo poAbs"
            style="color: #ACACAC;width: 24px;height: 24px;top: 5px;right: 5px;"
            @click.stop="shuaVisible = false"
          />
          <div class="wid100 poRel" style="height: 350px;overflow: hidden;">
            <!-- <div class="img-size-tips">当前尺寸：<span>{{cropW}}×{{cropH}}</span></div> -->
            <div class="avatar-tips">操作提示：鼠标滚轮缩放大小，拖动选区进行区域选择</div>
            <vue-cropper
              ref="cropper"
              class="wh100"
              :img="image"
              :can-move="false"
              :auto-crop-width="225"
              :auto-crop-height="126"
              :output-size="0.6"
              :output-type="outputType"
              :auto-crop="true"
              :fixed="true"
              :fixed-number="[225,126]"
              :original="false"
              :center-box="true"
              :info-true="true"
              fill-color="#ffffff"
              mode="contain"
            />
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0;">
            <el-upload action="#" :http-request="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
              <div class="mar-right20 que cuPo" style="background: #f49352;">上传新图</div>
            </el-upload>
            <div class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="jietu">确认</div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisible = false">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  VueCropper
} from 'vue-cropper'
import {
  courseAddEdit,
  reservationDetail
} from '@/api/coures'
import {
  getVenue
} from '@/api/venue'
import {
  uploadimg
} from '@/api/utils'
import {
  schedCardList
} from '@/api/member'
export default {
  name: 'CourseAdd',
  components: {
    VueCropper
  },
  data() {
    const validateGalleryful = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (!reg.test(value) || !value || value > 10000 || value === 0) {
        callback(new Error('请填写数值(1~10000)'))
      } else {
        callback()
      }
    }
    const validateTime = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (!reg.test(value) || !value || value > 1440 || value === 0) {
        callback(new Error('请输入课程时长(1~1440)'))
      } else {
        callback()
      }
    }
    const validateTeacher = (rule, value, callback) => {
      console.log(value)
      if (value === 0) {
        callback(new Error('请选择老师'))
      } else {
        callback()
      }
    }
    const validateSerial = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.serial === 2) {
        if (!reg.test(value) || !value || value === 0) {
          callback(new Error('请输入数字，数值越大越靠前'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateClassFee = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.type === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value > 9999.99 || value < 0) {
          callback(new Error('请输入0~9999.99内的数值'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateAstrict1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.time === 1 && this.ruleForm1.mode === 3) {
        if (!reg.test(value)) {
          callback(new Error('请输入整数'))
        } else {
          var absVal = Math.abs(value)
          if (Number(value) !== absVal) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    const validateAstrict2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.time === 2 && this.ruleForm1.mode === 3) {
        if (!reg.test(value)) {
          callback(new Error('请输入整数'))
        } else {
          var absVal = Math.abs(value)
          if (Number(value) !== absVal) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    const validateFenTime1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.time === 3 && this.ruleForm1.mode === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateFenTime2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.mode >= 2) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateUpMax = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.candidate === 1) {
        if (!reg.test(value) || (!value && value !== 0) || value < 1 || value > 50) {
          callback(new Error('请输入(1~50)整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateStop = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.candidate === 1) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCheckFenTime = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCheck === 1 && this.ruleForm1.selfCheckTime === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateCodeScan = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.codeScan === 1 && this.ruleForm1.codeScanTime === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCancelTime1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCancel === 1 && this.ruleForm1.s_selfCancel === 1) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCancelTime2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCancel === 1 && this.ruleForm1.s_selfCancel === 2) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCancelTime3 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCancel === 1 && this.ruleForm1.s_selfCancel === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validatePrice = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm2.paid === 1) {
        if (!reg.test(value) || !value || value < 0.01) {
          callback(new Error('请输入不小于0的数值，最多两位小数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateValue = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      var pd = false
      this.ruleForm2.cardTime.forEach(item => {
        if (Number(item) === Number(rule.field)) {
          pd = true
        }
      })
      if (pd) {
        this.cardTimeList.forEach(item => {
          if (Number(item.id) === Number(rule.field)) {
            value = item.nums
          }
        })
        if (!reg.test(value) || !value || value < 0.1) {
          callback(new Error('请输入次数(最多一位小数)'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      shuaVisible: false,
      isPopover: false,
      step: 1,
      colorList: [
        'FBB0A1', 'FEFF99', 'BCFD84', '95E2F5', '928FD9',
        '47D95E', 'E5D0C4', '9c4b4b', 'db6a51', 'f5c856',
        '75c090', 'ed707a', 'b0649a', 'd19fc9', '8b9599',
        '9c8088', 'a6c399', '5b6fc1', '9583b0', 'b0a763',
        'da8e6d', 'b07187', 'F8F6EF', 'EBDBC9', 'DAE1EB',
        'EBF4F7', 'E7DAD1', 'F7F1F1', 'F3D5D7', 'DDCCCD',
        'F4F0E5', 'EDA7A6', 'D0CAB7', 'EDE9E8', 'E6CEB7',
        'F4D7B7', 'F2E8D5', 'FBF0C8', 'ABB5C8', 'DCDCDC',
        'FBECE6', 'C4C6B8', 'EADDE3', 'ECF0EF'
      ],
      teacherList: [],
      outputType: 'jpeg',
      image: 'https://www.jianyigongxiang.com/public/membercard/kcfm.jpg',
      cropW: 225,
      cropH: 126,
      ruleForm: {
        type: 1,
        name: '',
        galleryful: null,
        kcTime: null,
        color: 'd19fc9',
        teacherName: 0,
        difficulty: 3,
        serial: 1,
        serialNumber: null,
        classFee: null,
        image: 'https://www.jianyigongxiang.com/public/membercard/kcfm.jpg',
        brief: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请填写1-30个字符课程名称',
          trigger: 'blur'
        }],
        galleryful: [{
          required: true,
          trigger: 'blur',
          validator: validateGalleryful
        }],
        kcTime: [{
          required: true,
          trigger: 'blur',
          validator: validateTime
        }],
        teacherName: [{
          required: true,
          trigger: 'change',
          validator: validateTeacher
        }],
        serialNumber: [{
          required: true,
          trigger: 'blur',
          validator: validateSerial
        }],
        classFee: [{
          required: true,
          trigger: 'blur',
          validator: validateClassFee
        }]
      },
      shiList: [],
      fenList: [],
      ruleForm1: {
        regulation: 1,
        mode: 3,
        time: 2,
        astrict1: null,
        astrict2: 3,
        startShi: 0,
        startFen: 0,
        endShi: 0,
        endFen: 0,
        startShi1: 0,
        startFen1: 0,
        fenTime1: 0,
        fenTime2: 0,
        candidate: 1,
        upMax: 5,
        stopTime: 0,
        stopCandidate: 0,
        selfCheck: 2,
        selfCheckTime: 2,
        selfCheckFenTime: 0,
        codeScan: 1,
        codeScanTime: 2,
        codeScanEnd: 0,
        codeScanEndTime: 0,
        selfCancel: 1,
        s_selfCancel: 1,
        selfCancelTime1: 30,
        selfCancelTime2: 0,
        selfCancelTime3: 0
      },
      rules1: {
        astrict1: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict1
        }],
        astrict2: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict2
        }],
        fenTime1: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime1
        }],
        fenTime2: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime2
        }],
        upMax: [{
          required: true,
          trigger: 'blur',
          validator: validateUpMax
        }],
        stopTime: [{
          required: true,
          trigger: 'blur',
          validator: validateStop
        }],
        stopCandidate: [{
          required: true,
          trigger: 'blur',
          validator: validateStop
        }],
        selfCheckFenTime: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCheckFenTime
        }],
        codeScanEnd: [{
          required: true,
          trigger: 'blur',
          validator: validateCodeScan
        }],
        codeScanEndTime: [{
          required: true,
          trigger: 'blur',
          validator: validateCodeScan
        }],
        selfCancelTime1: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCancelTime1
        }],
        selfCancelTime2: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCancelTime2
        }],
        selfCancelTime3: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCancelTime3
        }]
      },
      dateCardList: [],
      cardList: [],
      cardStoredList1: [],
      cardStoredList: [],
      cardTimeList1: [],
      cardTimeList: [],
      ruleForm2: {
        paid: 2,
        originalPrice: null,
        discounts: null,
        dateCard: [],
        dateCardAll: true,
        cardTime: [],
        cardTimeAll: true,
        cardStored: [],
        cardStoredAll: true
      },
      rules2: {
        originalPrice: [{
          required: true,
          trigger: 'blur',
          validator: validatePrice
        }],
        value: [{
          required: true,
          trigger: 'blur',
          validator: validateValue
        }]
      },
      rules3: {
        originalPrice: [{
          required: true,
          trigger: 'blur',
          validator: validatePrice
        }],
        value: [{
          required: true,
          trigger: 'blur',
          validator: validateValue
        }]
      },
      url: ''

    }
  },
  created() {
    var query = this.$route.query
    this.ruleForm.type = Number(query.type)
    this.url = this.ruleForm.type === 1 ? '/course/courseroll' : this.ruleForm.type === 2
      ? '/course/courseBoutique' : '/course/coursePersonal'
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: [{
        name: '新增课程',
        url: '/course/courseAdd?type=' + this.ruleForm.type,
        pd: true
      }]
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    for (var i = 0; i < 24; i++) {
      this.shiList.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    for (var i = 0; i < 60; i += 5) {
      this.fenList.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    this.getVen()
    this.getMember()
  },
  methods: {
    typeClick(index) {
      if (this.ruleForm.type !== index) {
        this.ruleForm.type = index,
        this.ruleForm.teacherName = 0,
        this.getVen()
      }
    },
    getReservationDetail() {
      reservationDetail({
        'type': this.ruleForm.type
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.ruleForm1 = {
          regulation: 1,
          mode: data.res_type,
          time: data.res_type2,
          astrict1: data.res_type2 === 1 ? data.res_day : '',
          astrict2: data.res_type2 === 2 ? data.res_day : '',
          startShi: data.res_type2 === 1 ? data.res_hour1 : 0,
          startFen: data.res_type2 === 1 ? data.res_minute1 : 0,
          endShi: data.res_type2 === 1 ? data.res_hour2 : 0,
          endFen: data.res_type2 === 1 ? data.res_minute2 : 0,
          startShi1: data.res_type2 === 2 ? data.res_hour1 : 0,
          startFen1: data.res_type2 === 2 ? data.res_minute1 : 0,
          fenTime1: data.advance2,
          fenTime2: data.advance,
          candidate: data.candidate,
          upMax: data.max_line_up_num,
          stopTime: data.stop_queuing,
          stopCandidate: data.stop_waiting,
          selfCheck: data.self_check,
          selfCheckTime: data.check_in_type1,
          selfCheckFenTime: data.check_front_minute1,
          codeScan: data.scan_check,
          codeScanTime: data.check_in_type,
          codeScanEnd: data.check_front_minute,
          codeScanEndTime: data.check_after_minute,
          selfCancel: data.self_cancel,
          s_selfCancel: data.self_cancel_type,
          selfCancelTime1: data.cancel_front_minute,
          selfCancelTime2: data.cancel_start_minute,
          selfCancelTime3: data.cancel_after_minute
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getMember() {
      schedCardList({
        'keyword': ''
      }).then(response => {
        const {
          data
        } = response
        this.dateCardList = data.term
        this.cardTimeList = data.numtime
        this.cardStoredList = data.stored

        this.dateCardList.forEach(item => {
          this.cardList.push(item.id)
        })
        this.ruleForm2.dateCard = this.cardList

        this.cardTimeList.forEach(item => {
          this.cardTimeList1.push(item.id)
        })
        this.ruleForm2.cardTime = this.cardTimeList1

        this.cardStoredList.forEach(item => {
          this.cardStoredList1.push(item.id)
        })
        this.ruleForm2.cardStored = this.cardStoredList1
      }).catch(error => {
        console.log(error)
      })
    },
    getVen() {
      getVenue({
        'type': this.ruleForm.type
      }).then(response => {
        const {
          data
        } = response
        var activities = [{
          id: 0,
          name: '请选择'
        }]
        this.teacherList = activities.concat(data)
      }).catch(error => {
        console.log(error)
      })
    },
    handleCheckAllChange1(val) {
      this.ruleForm2.cardTime = val ? this.cardTimeList1 : []
    },
    handleCheckAllChange2(val) {
      this.ruleForm2.cardStored = val ? this.cardStoredList1 : []
    },
    handleCheckedCitiesChange1(value) {
      const checkedCount = value.length
      this.ruleForm2.cardTimeAll = checkedCount === this.cardTimeList.length
    },
    handleCheckedCitiesChange2(value) {
      const checkedCount = value.length
      this.ruleForm2.cardStoredAll = checkedCount === this.cardStoredList.length
    },
    handleCheckAllChange(val) {
      this.ruleForm2.dateCard = val ? this.cardList : []
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.ruleForm2.dateCardAll = checkedCount === this.dateCardList.length
    },
    regulationClick(index) {
      if (this.ruleForm1.regulation !== index) {
        if (index === 1) {
          this.getReservationDetail()
        } else {
          this.ruleForm1.regulation = index
        }
      }
    },
    jinzhi() {
      this.$message.error('遵从系统设置时不可编辑，如需编辑请选择单独设置')
    },
    fanhui() {
      this.$router.go(-1)
    },
    handleTag() {
      const parseDom = this.parseDom(`<img src="${this.imageUrl}">`)
      // 在光标处插入dom
      this.range.insertNode(parseDom)
      // 光标开始和光标结束重叠
      this.range.collapse(true)
    },
    // 记录光标位置等 （debounce防抖提升性能）
    handleSelection(e) {
      this.selection = getSelection()
      // 光标对象
      this.range = this.selection.getRangeAt(0)
      // 获取光标对象的范围界定对象
      this.textNode = this.range.startContainer
      // 获取光标位置
      this.rangeStartOffset = this.range.startOffset
      this.ruleForm.brief = e.target.innerHTML
    },
    // 转dom对象
    parseDom(arg) {
      var objE = document.createElement('div')
      objE.innerHTML = arg
      return objE.childNodes[0]
    },
    handleAvatarSuccess1(file) {
      var that = this
      const mf = new FormData()
      mf.append('file', file.file)
      uploadimg(mf).then(response => {
        that.imageUrl = response.data
        that.handleTag()
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    jietu() {
      var that = this
      this.$refs.cropper.getCropData(data => {
        var file = this.dataURLtoBlob(data, 'chaijian')
        const mf = new FormData()
        mf.append('file', file)
        uploadimg(mf).then(response => {
          that.ruleForm.image = response.data
          that.shuaVisible = false
        })
      })
    },
    dataURLtoBlob(dataurl, name) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], name, {
        type: mime
      })
    },
    handleAvatarSuccess2(file) {
      this.image = URL.createObjectURL(file.file)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.step === 1 || (this.step === 2 && this.ruleForm.type !== 3)) {
            this.step += 1
            this.getReservationDetail()
          } else {
            var supportId = this.ruleForm2.dateCard.join(',')
            var frequency = []
            var storeds = []
            this.cardTimeList.forEach(item => {
              if (this.ruleForm2.cardTime.indexOf(item.id) !== -1) {
                frequency.push({
                  id: item.id,
                  name: item.name,
                  nums: item.nums
                })
              }
            })
            this.cardStoredList.forEach(item => {
              if (this.ruleForm2.cardStored.indexOf(item.id) !== -1) {
                storeds.push({
                  id: item.id,
                  name: item.name,
                  nums: item.nums
                })
              }
            })
            courseAddEdit({
              'name': this.ruleForm.name,
              'type': this.ruleForm.type,
              'hour_subsidy': this.ruleForm.classFee,
              'people_num': this.ruleForm.galleryful,
              'long_time': this.ruleForm.kcTime,
              'colors': this.ruleForm.color,
              'coach_id': this.ruleForm.teacherName,
              'dif_star': this.ruleForm.difficulty,
              'cover_img': this.ruleForm.image,
              'sort': this.ruleForm.serialNumber,
              'brief': this.ruleForm.brief,
              'res_rule': this.ruleForm1.regulation === 1 ? 0 : 1,
              'res_type': this.ruleForm1.mode,
              'res_type2': this.ruleForm1.time,
              'res_day': this.ruleForm1.time === 1 ? this.ruleForm1.astrict1 : this
                .ruleForm1.astrict2,
              'res_hour1': this.ruleForm1.time === 1 ? this.ruleForm1.startShi : this
                .ruleForm1.startShi1,
              'res_minute1': this.ruleForm1.time === 1 ? this.ruleForm1.startFen : this
                .ruleForm1.startFen1,
              'res_hour2': this.ruleForm1.endShi,
              'res_minute2': this.ruleForm1.endFen,
              'advance2': this.ruleForm1.fenTime1,
              'advance': this.ruleForm1.fenTime2,
              'candidate': this.ruleForm1.candidate,
              'max_line_up_num': this.ruleForm1.upMax,
              'stop_queuing': this.ruleForm1.stopTime,
              'stop_waiting': this.ruleForm1.stopCandidate,
              'self_check': this.ruleForm1.selfCheck,
              'check_in_type1': this.ruleForm1.selfCheckTime,
              'check_front_minute1': this.ruleForm1.selfCheckFenTime,
              'scan_check': this.ruleForm1.codeScan,
              'check_in_type': this.ruleForm1.codeScanTime,
              'check_front_minute': this.ruleForm1.codeScanEnd,
              'check_after_minute': this.ruleForm1.codeScanEndTime,
              'self_cancel': this.ruleForm1.selfCancel,
              'self_cancel_type': this.ruleForm1.s_selfCancel,
              'cancel_front_minute': this.ruleForm1.selfCancelTime1,
              'cancel_start_minute': this.ruleForm1.selfCancelTime2,
              'cancel_after_minute': this.ruleForm1.selfCancelTime3,
              'paid_course': this.ruleForm2.paid,
              'orig_price': this.ruleForm2.originalPrice,
              'sell_price': this.ruleForm2.discounts,
              'support_id': supportId,
              'numtime': JSON.stringify(frequency),
              'storeds': JSON.stringify(storeds)
            }).then(response => {
              this.fanhui()
            }).catch(error => {
              console.log(error)
            })
          }
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    }
  }
}
</script>

<style>
	.monitor-yt-popover1 {
		padding: 0;
		border-color: #84878d;
	}

	.monitor-yt-popover1 .popper__arrow::after {
		border-bottom-color: #84878d !important;
	}
</style>

<style lang="scss" scoped>
	.fanhui {
		background: #6b7cdd;
		padding: 0 24px;
		right: 63px;
		top: 10px;
		z-index: 10;
	}

	.m-action-step1 {
		width: 460px;
		height: 65px;
		margin: 0 auto 36px;
	}

	.m-action-step2 {
		width: 248px;
	}

	.curr1 {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: #e8e8e8;
		text-align: center;
		line-height: 36px;
		font-weight: 700;
		color: #a7a7a7;
	}

	.curr2 {
		background: #6b7cdd;
		color: #fff;
	}

	.titl {
		height: 25px;
		color: #787878;
	}

	.field {
		padding: 5px 15px;
		margin-bottom: 8px;
		background: #f2f2f2;
	}

	.label {
		float: left;
		width: 135px;
		min-height: 32px;
		line-height: 32px;
		padding-right: 10px;
		white-space: nowrap;
	}

	.item-l {
		background: #f2f2f2;
	}

	.item-r {
		width: 420px;
		padding: 0 15px;
	}

	.col {
		width: 36px;
		height: 36px;
		margin: 0 4px 3px 0;
	}

	.class-desc {
		width: 721px;
		height: 230px;
		border: 1px solid #d9d9d9;
		padding: 5px;
		line-height: 1.5;
	}

	.rich-insert {
		width: 100%;
		height: 30px;
		padding: 2px 5px;
		position: relative;
		vertical-align: text-top;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.rich-row {
		width: 100%;
		height: calc(100% - 31px);
		border: 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 5px;
		margin-top: 1px;
		outline: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	::v-deep .el-upload:focus {
		color: #000 !important;
	}

	::v-deep .el-upload-list {
		display: none;
	}

	.sel ::v-deep .el-input--medium .el-input__inner {
		padding: 0 20px 0 10px;
	}

	.cen ::v-deep .el-input__inner {
		text-align: center;
	}

	.setting-tips__normal {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}

	.img-size-tips {
		position: absolute;
		top: 3px;
		left: 5px;
		z-index: 10;
		color: #fff;
		font-size: 12px;
	}

	.avatar-tips {
		position: absolute;
		bottom: 3px;
		left: 5px;
		z-index: 10;
		color: #fff;
		font-size: 12px;
	}

	.que {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		vertical-align: top;
	}
</style>
